<template>
  <!-- 搜索 -->
  <el-card style="height: 80px">
    <search-comp
      :label="label"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    />
  </el-card>
  <!-- 表单 -->
  <el-card style="margin: 10px 0px">
    <!-- table展示信息 -->
    <el-table style="margin: 10px 0px" :data="logArr" stripe>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column
        label="用户名"
        prop="userName"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="状态"
        prop="status"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="IP"
        prop="ip"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="创建人"
        prop="createBy"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip>
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100px">
        <template #default="scope">
          <el-popconfirm
            :title="`你确定要删除${scope.row.userName}?`"
            width="260px"
            @confirm="deleteLoginLog(scope.row.id)"
          >
            <template #reference>
              <el-button link type="danger" size="small" icon="Delete"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 分页 -->
  <el-card>
    <pagination
      :pageNum="pageNum"
      :pageSize="pageSize"
      :total="total"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
  </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import type {
  RecordLoginLog,
  IPage,
  ILoginLogResponseData,
} from "@/api/acl/type";
import { reqFindPage, reqDeleteLog } from "@/api/acl/loginlog";
import { formatDateTime } from "@/utlis/datetime";
import { ElMessage } from "element-plus";
const label = ref("用户名");
const logArr = ref<RecordLoginLog>([]);
//默认页码
const pageNum = ref<number>(1);
//一页展示几条数据
const pageSize = ref<number>(5);
//用户总个数
const total = ref<number>(0);
//搜索条件
const keyword = ref<string>("");

onMounted(() => {
  inintData();
});
const inintData = async () => {
  const perams: IPage = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    params: {
      name: keyword.value,
    },
  };
  const res: ILoginLogResponseData = await reqFindPage(perams);
  if (res.code == 200) {
    total.value = res.data.totalSize;
    logArr.value = res.data.content;
  }
};
//搜索
const handleSearch = (val: string) => {
  keyword.value = val;
  pageNum.value = 1;
  inintData();
};
//重置搜索
const handleReset = () => {
  keyword.value = "";
  pageNum.value = 1;
  inintData();
};
//分页器下拉菜单的自定义事件的回调
const handleCurrentChange = (val: number) => {
  pageNum.value = val;
  inintData();
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  inintData();
};
//删除
const deleteLoginLog = async (id: number) => {
  let params = [];
  let idArray = (id + "").split(",");
  for (let i = 0; i < idArray.length; i++) {
    params.push({ id: idArray[i] });
  }
  const res = await reqDeleteLog(params);
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    inintData();
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
};
</script>
<style lang="scss" scoped></style>
